<div class="row">
    <div class="twelve columns">
        <center><h2>SIGN UP ON ITBUY</h2></center>
    </div>
</div>

<div class="row">
    <div class="ten columns centered">
        <form name="registerForm" ng-controller="UserRegisterController" ng-submit="submit()" novalidate>
            <fieldset>
                <legend>Account Information</legend>
                <div class="row">
                    <div class="two columns">
                        <label for="username" class="right inline">Username :</label>
                    </div>
                    <div class="five columns end">
                        <input type="text" name="username" id="username" ng-model="user.username" ng-class="{error: registerForm.username.$invalid}" required>
                        <small ng-show="registerForm.username.$error.required" class="error">Required</small>
                    </div>
                </div>
                <div class="row">
                    <div class="two columns">
                        <label for="password" class="right inline">Password :</label>
                    </div>
                    <div class="five columns">
                        <input type="password" name="password" id="password" placeholder="Password" ng-model="user.password">
                    </div>
                    <div class="five columns">
                        <input type="password" name="passwordre" id="passwordre" placeholder="Retype Password">
                    </div>
                </div>
                <div class="row">
                    <div class="two columns">
                        
                    </div>
                    <div class="ten columns">
                        <p><i>Please enter a strong password for your account. Note that password is case-sensitive</i></p>
                    </div>
                </div>
                <div class="row">
                    <div class="two columns">
                        <label for="email" class="right inline">Email :</label>
                    </div>
                    <div class="five columns">
                        <input type="text" name="email" id="email" placeholder="Email Address" ng-model="user.email">
                    </div>
                    <div class="five columns">
                        <input type="text" name="emailre" id="emailre" placeholder="Retype Email Address">
                    </div>
                </div>
                <div class="row">
                    <div class="two columns">
                        
                    </div>
                    <div class="ten columns">
                        <p><i>Please enter a valid email address for your account. Verification will be sent to this address</i></p>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>Personal Information</legend>
                <div class="row">
                    <div class="two columns">
                        <label class="right inline">Gender :</label>
                    </div>
                    <div class="ten columns">
                        <label for="gender"><input type="radio" name="gender" value="1"> Male</label>
                        <label for="gender"><input type="radio" name="gender" value="2"> Female</label>
                    </div>
                </div>
                <div class="row">
                    <div class="two columns">
                        <label for="realname" class="right inline">Real Name :</label>
                    </div>
                    <div class="five columns">
                        <input type="text" name="firstname" id="firstname" placeholder="First Name" ng-model="user.firstname">
                    </div>
                    <div class="five columns">
                        <input type="text" name="lastname" id="lastname" placeholder="Last Name" ng-model="user.lastname">
                    </div>
                </div>
                <div class="row">
                    <div class="two columns">
                        <label for="faculty" class="right inline">Faculty :</label>
                    </div>
                    <div class="ten columns">
                        
                    </div>
                </div>
                <div class="row">
                    <div class="two columns">
                        
                    </div>
                    <div class="ten columns">
                        <ul class="button-group even four-up">
                            <li><input type="submit" name="submit" id="submit" value="Submit" class="button"></li>
                            <li><button class="button secondary">Reset Form</button></li>
                        </ul>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>